<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <form>
    <button type="button">提交</button>
    <!-- <button type="submit">提交</button>
    <input type="submit" value="提交"> -->
  </form>
  <script>
    /*

    额外
    1 form标签 里面放有 按钮  button 默认的type类型是 submit 
      1 按钮点击 导致页面自动刷新 （提交数据）

    2 解决方法 
      1 把type类型写成  type="button"
      2 点击事件中 阻止默认行为 
    
    
    
    
    序列化
    快速把表单的值 构造成 适合在网络上传输数据格式 
    传输数据格式  
      1 ajax 参数传递 数据格式    a=1&b=2&c=3   jq内部封装 
      2 ajax 参数传递 文件上传    formdata   原生就支持 
     */


    const btn = document.querySelector("button");
    btn.onclick = function (e) {
      // 阻止默认行为
      // e.preventDefault();
      console.log("按钮被点击啦");
    }


  </script>
</body>

</html>